<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <h4>目标时间:2021-12-01 16:50:00</h4>
    <span>现在时间：</span><span id="nowElmt"></span>
    <div class="">
        <span>剩余时间：</span><span id="timeElmt"></span>
    </div>
    <script>
        let nowElmt = document.getElementById("nowElmt");
        let timeElmt = document.getElementById("timeElmt");
        var endTime = "2021-12-01 16:50:00";
        var showTime = function(endTime){
            var nowTime = new Date().getTime();
            var endTime = new Date(endTime).getTime();
            nowElmt.innerHTML = new Date(nowTime);
            var lastTime = endTime-nowTime;

            var allSeconds = Math.floor(lastTime/1000);
            var hours = Math.floor(allSeconds/3600);
            var minutes = Math.floor(allSeconds%3600/60);
            var seconds = Math.floor(allSeconds%60);
            var countdown = deal(hours)+":"+deal(minutes)+":"+deal(seconds);
            timeElmt.innerHTML = countdown;
        }
        function deal(num){
            if(num<10){
                num = "0"+num;
            }
            return num+""
        }
        setInterval(function(){
            showTime(endTime);
        },1000)
    </script>
</body>
</html>